<template>
  <div class="iphoneNo-container">

    <div class="box">
      <!--  手机号  -->
      <div class="iphoneNo">
        <div class="text tvc">
          账 号
        </div>
        <Input v-model="iphoneNo"
               placeholder="请输入手机号"
               size="large"
               clearable
               style="width: 80%"
               @on-enter="enter('iphoneNo')">

          <IconAli :sty="{width:'20px',height:'20px',marginTop:'8px'}"  slot="prefix" icon='iphone'></IconAli>

        </Input>
        <br>
        <div class="tip-text">
          <span v-if="iphoneNoTipFlag">{{ iphoneNoTip }}</span>
        </div>
      </div>

      <!-- 密码 -->
      <div class="pwd">
        <div class="text tvc">
          密 码
        </div>
        <Input v-model="pwd"
               placeholder="请输入密码"
               size="large"
               clearable
               type="password"
               style="width: 80%"
               ref="pwd"
               @on-enter="enter('pwd')">

          <IconAli :sty="{width:'20px',height:'20px',marginTop:'8px'}" slot="prefix" icon='pwd'></IconAli>

        </Input>
        <br>
        <div class="tip-text">
          <span v-if="pwdTipFlag">{{ pwdTip }}</span>
        </div>
      </div>

      <!-- 登录 -->
      <div class="btn">
        <Button type="success"
                size="large"
                style="width: 100%"
                @click="login">
          登录
        </Button>
      </div>
    </div>

  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";
export default {
  //组件名称
  name: "IphoneNo",
  props: [],
  //组件注册
  components: {IconAli},
  //数据驱动
  data() {
    return {
      iphoneNo: "15251922665",  //用户名
      pwd: "123456",       //密码
      iphoneNoTip: "", //提示
      iphoneNoTipFlag: false,
      pwdTip: "",       //提示
      pwdTipFlag: false,
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    enter(t) {
      if (t == 'iphoneNo') { //聚焦pwd输入框
        this.$refs.pwd.focus({
          cursor: 'end'
        });
      } else if (t == 'pwd') { //登录
        this.login();
      }
    },
    checkInfo() {
      let flag = false;
      let iphoneNo = this.iphoneNo;
      let b1 = this.check.isNull(iphoneNo); // ture 表示空
      if (b1) { //如果为真,说明手机号为空
        this.iphoneNoTipFlag = true
        this.iphoneNoTip = "* 手机号不能为空"
      } else { //手机号不为空
        let b2 = this.check.isPhoneNo(iphoneNo); //true 表示是手机号
        if (!b2) { //如果为真,说明 b2 为 false,说明不是手机号
          this.iphoneNoTipFlag = true
          this.iphoneNoTip = "* 手机号格式错误"
        } else {
          this.iphoneNoTipFlag = false
          this.iphoneNoTip = ""
          flag = true
        }
      }

      let pwd = this.pwd;
      let b3 = this.check.isNull(pwd); // ture 表示空
      if (b3) { //如果为真,说明密码为空
        this.pwdTipFlag = true
        this.pwdTip = "* 密码不能为空"
        flag = false;
      } else {
        this.pwdTipFlag = false
        this.pwdTip = ""
      }
      return flag;
    },
    //登录
    login() {
      let flag = this.checkInfo();
      if (!flag) { //如果前面有任何一项不满足,直接跳出
        return;
      }
      //发起请求
      let data = {
        iphoneNo: this.iphoneNo,
        pwd: Base64.encode(this.pwd)
      }
      this.axios.post(`/login/login/user`, data)
          .then((data) => {
            let code = data.code; //code
            let msg = data.msg;   //提示信息
            switch (code) {
              case 10003:     //手机号未注册
              case 10005:     //账号已冻结
                this.iphoneNoTipFlag = true
                this.iphoneNoTip = msg;
                break;
              case 10004:    //密码不能为空
                this.pwdTipFlag = true
                this.pwdTip = msg
                this.iphoneNoTipFlag = true
                this.iphoneNoTip = msg;
                break;
              case 200:     //请求成功
                this.success(data.data);
                break;
            }
          })
    },
    //请求成功
    success(data) {
      /**
       * 将用户信息保存到本地
       */
      let isLogin = true;
      let userId = data.userInfo.userId;
      let token = data.token;
      let userInfo = {
        userId: data.userInfo.userId,
        userName: data.userInfo.userName,
        userNickName: data.userInfo.userNickName,
        iphoneNo: data.userInfo.iphoneNo,
        headPortraitUrl: data.userInfo.headPortraitUrl,
        status: data.userInfo.status,
        roleList: data.userInfo.roleList,
      }
      let userStringify = JSON.stringify(userInfo);

      //保存到 LocalStorage
      window.localStorage.setItem("isLogin", isLogin);
      window.localStorage.setItem("userId", userId);
      window.localStorage.setItem("token", token);
      window.localStorage.setItem("userStringify", userStringify);

      //保存到 SessionStorage
      window.sessionStorage.setItem("isLogin", isLogin);
      window.sessionStorage.setItem("userId", userId);
      window.sessionStorage.setItem("token", token);
      window.sessionStorage.setItem("userStringify", userStringify);

      //保存到 Vuex
      this.$store.dispatch('asyncSetIsLogin', isLogin)
      this.$store.dispatch('asyncSetUserId', userId)
      this.$store.dispatch('asyncSetToken', token)
      this.$store.dispatch('asyncSetUserInfo', userInfo)

      // console.log("登录成功");
      // console.log(this.$store.state);

      /**
       * 跳转首页
       */
      this.$router.push("/home");
    }
  },
  //钩子函数
  mounted() {
  }
}
</script>

<style lang="less" scoped>
.iphoneNo-container {
  width: 100%;
}

/*盒子*/
.box {
  width: 95%;
  margin: auto;
  /*错误提示*/

  .tip-text {
    margin-top: 2px;
    color: #f13b3b;
    height: 14px;
    font-size: 14px;
    line-height: 14px;
    margin-left: 20%;
  }

  .iphoneNo {
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
  }

  .pwd {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
  }

  /*文字*/

  .text {
    width: 20%;
    font-size: 18px;
    line-height: 40px;
    color: #333;
  }

  .btn {
    margin-top: 20px;
  }
}

</style>